<template>
  <div class="user-header">
    <van-row type="flex" align="center" justify="center">
      <van-col class="father">
        <van-image
          round
          width="60px"
          height="60px"
          :src="watchingUser.decorate_avatar"
        />
        <van-icon
          name="chat-o"
          class="chatbtn"
          @click="goChat"
          v-if="tokenInfo.user_id != watchingUser.id"
        />
      </van-col>
    </van-row>

    <div class="user-name">{{ watchingUser.username }}</div>
    <van-row type="flex" justify="center" class="fs-num" gutter="60">
      <van-col
        @click="
          homeUser
            ? $router.push(`/users/${watchingUser.id}`)
            : $emit('updateComName', 'UserFollowings')
        "
      >
        <div>关注</div>
        <div>{{ watchingUser.following_user_count }}</div>
      </van-col>
      <van-col
        @click="
          homeUser
            ? $router.push(`/users/${watchingUser.id}`)
            : $emit('updateComName', 'UserFans')
        "
      >
        <div>粉丝</div>
        <div>{{ watchingUser.fans_count }}</div>
      </van-col>
      <van-col
        @click="
          homeUser
            ? $router.push(`/users/${watchingUser.id}`)
            : $emit('updateComName', 'UserCollections')
        "
      >
        <div>收藏</div>
        <div>{{ watchingUser.collection_articles_count }}</div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    homeUser: {
      default: false,
    },
  },
  computed: {
    ...mapState("user", ["watchingUser", "tokenInfo"]),
  },
  methods: {
    goChat() {
      this.$router.push(`/chat/${this.watchingUser.id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.user-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(141deg, #8e9eab 25%, #eef2f3 65%);
  padding: 30px 0;
  padding-bottom: 15px;
  border-radius: 20px;
}
.fs-num {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}
.user-name {
  font-size: 20px;
  font-weight: 400;
}
.father {
  position: relative;
}
.chatbtn {
  position: absolute;
  right: -130px;
  top: -15px;
}
</style>
